<template>
  <div id="live_pie">
    <div ref="pie" class="pieBox"></div>
  </div>
</template>

<script>
export default {
  props: {
    valueData: Array | Object,
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.$nextTick(()=>{
      this.drawpie();
    });
  },

  methods: {
    drawpie() {
      let that = this;
      let myChart = that.$echarts.init(that.$refs.pie);
      let option = {
        color: ["#f3ac62", "#f89448",  "#f18b6a","#f06c44", "#fd9254"],
        tooltip: {
          trigger: "item",
          formatter: "{b} :{d}%",
          confine: true, //将此限制打开后tooltip将不再溢出
        },

        series: [
          {
            // left: '20%',
            // right: '20%',
            // top: '20%',
            // bottom: '20%',
            name: "访问来源",
            type: "pie",
            radius: ["42%", "55%"],
            center: ["50%", "50%"],
            minAngle: 18,
            labelLine: {
              // 设置指示线的长度
              normal: {
                length: 12,
                length2: 8,
              },
            },
            label: {
              // position: "inside",
              formatter: " {b|{b}：}{d|{d}% }",
              borderColor: "#aaa",
              avoidLabelOverlap: true,
              rich: {
                b: {
                  fontSize: 12,
                  lineHeight: 33,
                  color: "rgba(255,255,255,0.7)",
                },
                d: {
                  color: "rgba(255,255,255,0.7)",
                  align: "center",
                },
              },
            },
            data: that.valueData,
          },
        ],
      };
      myChart.clear();
      myChart.setOption(option);
//       myChart.setOption({
//         graphic: {
//           type: "image",
//           bounding: "raw",
//           top: "60%",
//           left: "20%",
// /*           style: {
//             image:
//               "",
//             width: "70",
//             height: "30",
//           }, */
//         },
//       });
      let resizeFn = function () {
        myChart.resize();
      } 
      window.addEventListener('resize',resizeFn);
      this.$once('hook:beforeDestroy', () => {
        myChart.dispose();
        myChart = null;
        window.removeEventListener('resize',resizeFn);
      });
    },
  },
};
</script>
<style lang='less' scoped>
#live_pie {
  > div {
    width: 100%;
    height: 100%;
  }
}
</style>